<template>
	<view class="rows d-flex f-column a-center p-top20 top">
		<text class="color_66 size32 bold500">{{title}}</text>
		<text class="color_66 size26 m-top10">已答{{do_num}}题</text>
		<view class="row m-top20 p-left30">
			<text class="color_66 size26">状态说明：</text>
			<view class="d-flex a-center m-left30">
				<view class="dot"></view>
				<text class="color_99 size22 m-left10">已答题</text>
			</view>
			<view class="d-flex a-center m-left30">
				<view class="dots"></view>
				<text class="color_99 size22 m-left10">未答题</text>
			</view>
		</view>
		
		
		<view class="row m-top20">
			<view class="nums flexac" v-for="(item,index) in pageData" :key="index">
				<view class="num flexac" :class="item.state?'bgFF4':'noer'" 
				    @click="toUrl(`list?act_id=${act_id}&gid=${gid}&item_id=${item.item_id}`)">{{item.id}}</view>
			</view>
			
		</view>
		
		
		<view class="Resume flexac white size32 t-letter4"
		      @click="toUrl(`list?act_id=${act_id}&gid=${gid}`)">继续答题</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				act_id:'',
				gid:'',
				pageData:[],
				do_num:0,
				title:'',
			}
		},
		onLoad(opt) {
			if(opt.act_id) this.act_id = opt.act_id;
			if(opt.gid) this.gid = opt.gid;
			this.questionCard();
		},
		methods: {
			questionCard(){
				this.$http.post({
					url:'/SRA_Standup2021/questionCard ',
					data:{
						act_id:this.act_id,
						gid:this.gid,
						token: this.bid
					}
				}).then(res=>{
					if(!res.success) return;
					const result = res.data;
					this.pageData = result.list || [];
					this.do_num = result.do_num;
					this.title = result.title;
				})
			}
		},
		computed: {
			...mapState(['bid']),
		},
	}
</script>

<style lang="scss" scoped>
	.dot{
		width: 28rpx;
		height: 28rpx;
		background: #FF7F8E;
		border: 1px solid #FF4459;
		border-radius: 50%;
	}
	.dots{
		width: 28rpx;
		height: 28rpx;
		border:1px solid #C0C0C0;
		border-radius: 50%;
	}
	.nums{
		flex-basis: calc(100% / 6);
		margin-top:30rpx;
	}
	.num{
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		font-size:30rpx;
		overflow: hidden;
	}
	.bgFF4{
		background-color: #FF7F8E;
		border:1px solid #FF4459;
		color:#A62424;
	}
	.noer{
		border:1px solid #C0C0C0;
	    color:#9E9E9E;
	}
	.Resume{
		width: 236rpx;
		height: 66rpx;
		background: #F34343;
		border-radius: 33rpx;
		margin:150rpx auto 100rpx auto;
	}
</style>
